﻿<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2017-2018 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>ol-ext: Graticule control</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <link rel="stylesheet" href="../style.css" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>

  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>
  
  <!-- Proj4 -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js"></script>
  
  <style>
    #map {
      background: #fff;
      border:1px solid #000;
      padding:1em;
    }
    .ol-mouse-position {
      top: auto;
      bottom: 1em;
      left: 50%;
      right:auto;
      position: absolute;
      transform: translateX(-50%);
      background: rgba(255,255,255,0.5);
      font-size: 14px;
    }
  </style>
</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: Graticule control</h1>
  </a>
  <div class="info">
    The <i>ol.control.Graticule</i> show a graticule on the map.
    <ul>
      <li>
        TODO: fix border and text when rotating...
      </li>
      <li>
        TODO: handle wrapX
      </li>
      <li>
        TODO: remove artifacts on limits
      </li>
    </ul>
    <p>
      See <a href="./map.control.graticule2.html">this example</a> to use precision and intervals to display MGRS grid.
    </p>
  </div>

  <!-- Map div -->
  <div id="map" style="width:600px; height:400px;"></div>

  <div class="options">
    <h2>Options:</h2>
    <ul>
      <li>
        Projection:
        <select id="grat" onchange="setGraticule(true)">
          <option value="4326">WGS 84 (EPSG:4326)</option>
          <option value="2154">Lambert-93 (France) EPSG:2154</option>
          <option value="27700">British National Grid (EPSG:27700)</option>
          <option value="54009">Mollweide (ESRI:54009)</option>
          <option value="23032">ED50 / UTM zone 32N (EPSG:23032)</option>
          <option value="2163">US National Atlas Equal Area (EPSG:2163)</option>
          <option value="3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
          <option value="5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
          <!--
            <option value="32662">Plate Carree</option>
          -->
        </select>
      </li>
      <li>
        Font: 
        <select id="fontsize" onchange="setGraticule()">
          <option value="8">8</option>
          <option value="10" selected="selected">10</option>
          <option value="12">12</option>
        </select>
        <select id="fontstyle" onchange="setGraticule()">
          <option value="">normal</option>
          <option value="bold">bold</option>
          <option value="italic">italic</option>
          <option value="bold italic">bold italic</option>
        </select>
        <select id="font" onchange="setGraticule()">
          <option value="Arial, Helvetica, Helvetica, sans-serif">Arial</option>
          <option value="Times, Times New Roman, Georgia, serif">Times</option>
          <option value="Courier, monospace">Courier</option>
          <option value="Comic Sans MS, Comic Sans, cursive">Comic</option>
          <option value="fantasy">fantasy</option>
        </select>
      </li>
      <li>
        <input id="line" type="checkbox" checked="checked" onchange="setGraticule()" /><label for="line"> draw lines</label>
      </li>
      <li>
        <input id="border" type="checkbox" checked="checked" onchange="setGraticule()" /><label for="border"> draw border</label>
      </li>
      <li>
        <input id="coords" type="checkbox" checked="checked" onchange="setGraticule()" /><label for="coords"> show coords</label>
      </li>
      <li>
        Color:
        <select id="color" onchange="setGraticule(this.value)">
          <option value="black">black</option>
          <option value="red">red</option>
          <option value="green">green</option>
          <option value="blue">blue</option>
        </select>
      </li>
    </ul>
  </div>
  
  <script type="text/javascript">
    // Define proj4 projection
    proj4.defs("EPSG:2154","+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
    proj4.defs("EPSG:27700","+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs");
    //proj4.defs("EPSG:32662","+proj=eqc +lat_ts=0 +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs");
    //proj4.defs("EPSG:54024","+proj=bonne +lon_0=0 +lat_1=60 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs ");
    proj4.defs('EPSG:5479', '+proj=lcc +lat_1=-76.66666666666667 +lat_2=-79.33333333333333 +lat_0=-78 +lon_0=163 +x_0=7000000 +y_0=5000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
    proj4.defs('EPSG:23032', '+proj=utm +zone=32 +ellps=intl +towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs');
    proj4.defs('EPSG:21781', '+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel +towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs');
    proj4.defs('EPSG:3413', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
    proj4.defs('EPSG:2163', '+proj=laea +lat_0=45 +lon_0=-100 +x_0=0 +y_0=0 +a=6370997 +b=6370997 +units=m +no_defs');
    proj4.defs('ESRI:54009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');

    // Define projection extent
    if (ol.proj.proj4 && ol.proj.proj4.register) ol.proj.proj4.register(proj4);
    ol.proj.get('EPSG:2154').setExtent([0, 6000000, 1250000, 7200000]);
    ol.proj.get('EPSG:27700').setExtent([0, 0, 800000, 1400000]);
    ol.proj.get('EPSG:5479').setExtent([6825737.53, 4189159.80, 9633741.96, 5782472.71]);
    ol.proj.get('EPSG:23032').setExtent([-1206118.71, 4021309.92, 1295389.00, 8051813.28]);
    ol.proj.get('EPSG:21781').setExtent([485071.54, 75346.36, 828515.78, 299941.84]);
    ol.proj.get('EPSG:3413').setExtent([-4194304, -4194304, 4194304, 4194304]);
    ol.proj.get('EPSG:2163').setExtent([/*-8040784.5135*/-4000000, -2577524.9210, 3668901.4484, /*4785105.1096*/4450000]);
    ol.proj.get('ESRI:54009').setExtent([-18e6, -9e6, 18e6, 9e6]);

    // The map
    var map = new ol.Map
      ({	target: 'map',
        view: new ol.View({
          zoom: 6,
          center: [-20094, 6234453]
        }),
        // controls: ol.control.defaults({ "attribution": false }),
        layers: [new ol.layer.Tile({
          name: "OSM",
          source: new ol.source.OSM(),
          visible: true
        })]
      });

    var grat = {
      '4326': new ol.control.Graticule({ step: 0.1, stepCoord: 5, margin:5, projection: 'EPSG:4326', formatCoord:function(c){ return c.toFixed(1)+"°" } }),
      //'32662': new ol.control.Graticule({ step: 1000, stepCoord: 1, projection: 'EPSG:32662' }),
      '5479': new ol.control.Graticule({ step: 1000, stepCoord: 1, projection: 'EPSG:5479' }),
      '23032': new ol.control.Graticule({ step: 1000, stepCoord: 1, projection: 'EPSG:23032' }),
      '21781': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'EPSG:21781' }),
      '3413': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'EPSG:3413' }),
      '2163': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'EPSG:2163' }),
      '54009': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'ESRI:54009' }),
      '2154': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'EPSG:2154' }), 
      '27700': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'EPSG:27700' })
    };

    var g;
    function setGraticule(proj) {
      if (g) map.removeControl(g);
      g = grat[$("#grat").val()];
      var c = $("#color").val();
      var style = new ol.style.Style();
      if ($("#line").prop('checked')) style.setStroke (new ol.style.Stroke({ color:c, width:1 }));
      if ($("#border").prop('checked')) style.setFill (new ol.style.Fill({ color: $("#line").prop('checked') ? "#fff" : "#000" }));
      if ($("#coords").prop('checked')) style.setText (new ol.style.Text({
        stroke: new ol.style.Stroke({ color:"#fff", width:2 }),
        fill: new ol.style.Fill({ color:c }),
        font: $('#fontstyle').val()+' '+$('#fontsize').val()+'px '+$('#font').val(),
      }));
      g.setStyle(style);
      map.addControl(g);
      if (proj && ol.proj.get(g.get('projection')).getExtent()) {
        var ext = ol.proj.get(g.get('projection')).getExtent();
        ext = ol.proj.transformExtent (ext, g.get('projection'), map.getView().getProjection());
        map.getView().fit(ext, ol.proj.get(g.get('projection')).getExtent(), map.getSize());
        map.getView().setZoom(map.getView().getZoom()+1)
      }
    }
    setGraticule();

    /*
    var mousePositionControl = new ol.control.MousePosition(
    {	coordinateFormat: ol.coordinate.createStringXY(0),
      projection: 'EPSG:2154',
      undefinedHTML: '&nbsp;'
    });
    map.addControl (mousePositionControl);
    */
    
  </script>

</body>
</html>